<template>
  <div class="home-container">
    <nav-list :clickIndex="clickIndex"></nav-list>
    <div>
      <div class="date-picker" style="margin-right: 15px">
        <el-date-picker
            v-model="selectDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="changePicker"
            :picker-options="pickerOptions"
            size="small"
        >
        </el-date-picker>
      </div>
      <div
          id="lineChart"
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.1)"
          style="
                    width: 99vw;
                    height: 80vh;
                    display: inline-block;
                    padding-top: 40px;
                    margin-left: 0.5vw;
                "
      ></div>
    </div>

    <el-dialog width="80%" :visible.sync="dialogTableVisible">
      <avue-crud
          :page.sync="page"
          :data="tableData"
          :option="tableOption4"
          :table-loading="tableLoading"
          :header-cell-class-name="headerCell"
          :row-class-name="rowCell"
          @on-load="getanalyseuserdata"
          ref="crud"
      >
      </avue-crud>
    </el-dialog>
  </div>
</template>
<script>
import {
  getScreenIndex,
  getPageIndex,
  getMapIndex,
  getUserData,
  getVipNum,
} from "@/api/homeIndex/homeIndex";
import {
  getuseractivedata,
  getanalyseuserdata,
} from "@/api/inviteIndex/inviteIndex";
import "echarts/extension/bmap/bmap";
import {tableOption4, tableOption3} from "@/const/inviteIndex/inviteIndex";
import navList from "@/components/navList/navList.vue";

export default {
  name: "homeIndex",
  components: {
      navList
  },
  data() {
    return {
      selectDate: "",
      // 日期时间范围在一个月以内
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectDate = minDate.getTime();
          if (minDate && !maxDate) {
            this.timeOptionRange = minDate;
          }
          if (maxDate) {
            this.selectDate = "";
            this.timeOptionRange = null;
          }
        },
        disabledDate: (time) => {
          let timeOptionRange = this.timeOptionRange
          if (timeOptionRange && time.getTime() === timeOptionRange.getTime()) return true
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return (
                time.getTime() < minTime || time.getTime() > maxTime
            );
          }
        },
      },
      dialogTableVisible: false,
      tableData: [],
      tableOption4: tableOption4,
      tableOption3: tableOption3,
      countData: [],
      dialogTableVisible2: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 100,
      },
      tableLoading: true,
      navList: [
        {
          name: "首页",
          type: 1,
          img: "../../../public/static/images/nav_1.png",
        },
        {
          name: "活跃分析",
          type: 4,
          img: "../../../public/static/images/nav_3.png",
        },
        {
          name: "行为分析",
          type: 5,
          img: "../../../public/static/images/nav_3.png",
        },
        {
          name: "小竹叶分析",
          type: 3,
          img: "../../../public/static/images/nav_3.png",
        },
        {
          name: "邀请排行榜",
          type: 2,
          img: "../../../public/static/images/nav_3.png",
        },

        // {
        //   name: '首页2',
        //   type: 3,
        //   img: '../../../public/static/images/nav_3.png'
        // }
      ],
      clickIndex: 5,
      echartOption: {
        color: ["#4DA1FF", "#A8DE96", "#FFB129"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["PC", "App", "小程序"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 40,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "PC",
            type: "bar",
            data: [],
          },
          {
            name: "App",
            type: "bar",
            data: [],
          },
          {
            name: "小程序",
            type: "bar",
            data: [],
          },
        ],
      },
      mapOption: {
        bmap: {
          center: [117.27, 31.86],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#044161",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#064f85",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#005b96",
                  lightness: 1,
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#00508b",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  color: "#056197",
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry.fill",
                stylers: {
                  color: "#029fd4",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#1a5787",
                },
              },
              {
                featureType: "label",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
            ],
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: [],
            encode: {
              value: 2,
            },
            symbolSize: 10,
            label: {
              formatter: "{b}",
              position: "right",
            },
            itemStyle: {
              color: "#ddb926",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: [],
            encode: {
              value: 2,
            },
            symbolSize: 30,
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#f4e925",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      },
      indexObj: {},
      pickerTime: "",
      loading: true,
      topData: [],
      dataType: "",
      scrollView: false,
      lineOpiton: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["PC", "App", "小程序"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "PC",
            type: "line",
            stack: "PC",
            data: [],
          },
          {
            name: "App",
            type: "line",
            stack: "App",
            data: [],
          },
          {
            name: "小程序",
            type: "line",
            stack: "xcx",
            data: [],
          },
        ],
      },

      lineChart: null,
      lineChartClick: false,
      dataparams: {}
    };
  },
  watch: {},
  created() {
    // this.getIndex();
    let startDate = this.$moment().add(0, "days").format("YYYY-MM-DD");
    let endDate = this.$moment().add(1, "days").format("YYYY-MM-DD");
    let monDate = this.$moment().subtract(1, "months").format("YYYY-MM-DD");
    this.pickerTime = [monDate, startDate];
    this.selectDate = [monDate, startDate];
    this.$nextTick(() => {
      // this.getCount();
    });
  },
  mounted() {
    this.$nextTick(() => {
      // this.getMap();
      // this.getuseractivedata();
      this.getPageClick();
    });
    this.getWebSocket();
  },

  props: [],
  methods: {
    clickData(type) {
      this.dataType = type;
      this.dialogTableVisible = true;
      let params = {
        type: type,
      };
      this.getPage(this.page, params);
    },

    getPage(page, params) {
      this.tableLoading = true;
      let obj = {
        type: this.dataType,
        page: page.currentPage,
        pagesize: page.pageSize,
      };

      getUserData(obj).then((res) => {
        this.tableData = res.data.data;
        // this.page.total = res.data.data[0].all_count;
        this.tableLoading = false;
      });
    },

    // 获取对于时间范围用户活跃数据
    getuseractivedata(e = null) {
      if (!e)
        var obj = {
          start_date: this.selectDate[0],
          end_date: this.selectDate[1],
        };
      else
        var obj = {
          start_date: e[0],
          end_date: e[1],
        };
      getuseractivedata(obj).then((res) => {
        console.log(res);
        let xData = [];
        let pcData = [];
        let mData = [];
        let appletData = [];
        res.data.data.forEach((val) => {
          xData.push(val.date);
          pcData.push(val.pc);
          mData.push(val.m);
          appletData.push(val.applet);
        });
        this.lineOpiton.xAxis.data = xData;
        this.lineOpiton.series[0].data = pcData;
        this.lineOpiton.series[1].data = mData;
        this.lineOpiton.series[2].data = appletData;
        console.log(mData);
        this.$echarts
            .init(document.getElementById("lineVip"))
            .setOption(this.lineOpiton);
      });
    },

    //获取总会员数折线图
    openDialog() {
      this.dialogTableVisible2 = true;
      this.$nextTick(() => {
        this.getPageClick();
      });
    },

    getCount() {
      let obj = {
        start_date: this.selectDate[0],
        end_date: this.selectDate[1],
      };
      getVipNum(obj).then((res) => {
        console.log(res);
        let xData = [];
        let pcData = [];
        let mData = [];
        let appletData = [];
        res.data.data.forEach((val) => {
          xData.push(val.date);
          pcData.push(val.pc);
          mData.push(val.m);
          appletData.push(val.applet);
        });
        this.lineOpiton.xAxis.data = xData;
        this.lineOpiton.series[0].data = pcData;
        this.lineOpiton.series[1].data = mData;
        this.lineOpiton.series[2].data = appletData;
        this.$echarts
            .init(document.getElementById("lineVip"))
            .setOption(this.lineOpiton);
      });
    },

    //改变总会员数的日期渲染
    changeVip(e) {
      let obj = {
        start_date: e[0],
        end_date: e[1],
      };
      getVipNum(obj).then((res) => {
        console.log(res);
        let xData = [];
        let pcData = [];
        let mData = [];
        let appletData = [];
        res.data.data.forEach((val) => {
          xData.push(val.date);
          pcData.push(val.pc);
          mData.push(val.m);
          appletData.push(val.applet);
        });
        this.lineOpiton.xAxis.data = xData;
        this.lineOpiton.series[0].data = pcData;
        this.lineOpiton.series[1].data = mData;
        this.lineOpiton.series[2].data = appletData;
        this.$echarts
            .init(document.getElementById("lineVip"))
            .setOption(this.lineOpiton);
      });
    },

    //表头样式
    headerCell({row, column, rowIndex, columnIndex}) {
      return "header-cell";
    },

    rowCell({row, column, rowIndex, columnIndex}) {
      if (rowIndex % 2 == 0) {
        return "row-cell";
      } else {
        return "row-cells";
      }
    },
    navClick(item) {
      this.clickIndex = item.type;
      if (item.type == 1) {
        this.$router.push("/homeIndex");
      } else if (item.type == 2) {
        this.$router.push("/inviteIndex");
      } else if (item.type == 3) {
        this.$router.push("/bambooIndex");
      } else if (item.type == 4) {
        this.$router.push("/activeAnalysis");
      } else if (item.type == 5) {
        this.$router.push("/behaviorAnalysis");
      }
    },

    //获取首页数据
    getIndex() {
      getScreenIndex().then((res) => {
        this.indexObj = res.data.data;
      });
    },

    //获取用户点击页面分析
    getPageClick() {
      let obj = {
        start_date: this.pickerTime[0],
        end_date: this.pickerTime[1],
      };
      getPageIndex(obj).then((res) => {
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        res.data.data.forEach((val) => {
          if (val.type == 1) {
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            }else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr1.push(val);
          } else if (val.type == 2) {
            val.num = val.sum_num;
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            }else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr2.push(val);
          } else if (val.type == 3) {
            val.wechatNum = val.sum_num;
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            }else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr3.push(val);
          }
        });
        let amounts = [];
        let amounts2 = [];
        let amounts3 = [];
        let names = [];
        const combined = arr1.reduce((acc, cur) => {
          const target = acc.find((e) => e.m_id === cur.m_id);
          if (target) {
            Object.assign(target, cur);
          } else {
            acc.push(cur);
          }
          return acc;
        }, arr2);
        const combined2 = combined.reduce((acc, cur) => {
          const target = acc.find((e) => e.m_id === cur.m_id);
          if (target) {
            Object.assign(target, cur);
          } else {
            acc.push(cur);
          }
          return acc;
        }, arr3);
        combined2.forEach((val) => {
          amounts.push(val.sum_num);
          amounts2.push(val.num);
          amounts3.push(val.wechatNum);
          names.push(val.name);
        });
        this.echartOption.xAxis[0].data = names;
        this.echartOption.series[0].data = amounts;
        this.echartOption.series[1].data = amounts2;
        this.echartOption.series[2].data = amounts3;

        let lineChart = this.$echarts.init(
            document.getElementById("lineChart")
        );

        let that = this;
        if (!that.lineChartClick)
          lineChart.on("click", function (params) {
            that.lineChartClick = true;
            that.dataparams = params
            that.getanalyseuserdata(that.page);
          });
        lineChart.setOption(this.echartOption);
      });
    },

    getanalyseuserdata(page) {
      let params = this.dataparams
      let midlist = [
        "问题库",
        "税收法规库",
        "会计法规库",
        "优惠政策",
        "模板专区",
        "发票助手",
        "小竹资讯",
        "小竹学院",
        "小竹企服",
        "小竹问答",
        "财税工具"
      ];
      let typelist = ["PC", "App", "小程序"];
      console.log(params.name);
      let obj = {
        start_date: this.pickerTime[0],
        end_date: this.pickerTime[1],
        type: typelist.indexOf(params.seriesName) + 1,
        m_id: midlist.indexOf(params.name) + 1,
        page: page.currentPage,
        pagesize: page.pageSize,
      };
      getanalyseuserdata(obj).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.dialogTableVisible = true;
        this.tableLoading = false;
        this.page.total = res.data.data[0].all_count;
      });
    },

    //改变日期渲染数据
    changePicker(e) {
      let obj = {
        start_date: this.$moment(e[0]).format("YYYY-MM-DD"),
        end_date: this.$moment(e[1]).format("YYYY-MM-DD"),
      };
      this.pickerTime[0] = this.$moment(e[0]).format("YYYY-MM-DD");
      this.pickerTime[1] = this.$moment(e[1]).format("YYYY-MM-DD");
      getPageIndex(obj).then((res) => {
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        res.data.data.forEach((val) => {
          if (val.type == 1) {
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            }else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr1.push(val);
          } else if (val.type == 2) {
            val.num = val.sum_num;
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            } else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr2.push(val);
          } else if (val.type == 3) {
            val.wechatNum = val.sum_num;
            if (val.m_id == 1) {
              val.name = "问题库";
            } else if (val.m_id == 2) {
              val.name = "税收法规库";
            } else if (val.m_id == 3) {
              val.name = "会计法规库";
            } else if (val.m_id == 4) {
              val.name = "优惠政策";
            } else if (val.m_id == 5) {
              val.name = "模板专区";
            } else if (val.m_id == 6) {
              val.name = "发票助手";
            } else if (val.m_id == 7) {
              val.name = "小竹资讯";
            } else if (val.m_id == 8) {
              val.name = "小竹学院";
            } else if (val.m_id == 9) {
              val.name = "小竹企服";
            } else if (val.m_id == 10) {
              val.name = "小竹问答";
            }else if (val.m_id == 11) {
              val.name = "财税工具";
            }
            arr3.push(val);
          }
        });
        let amounts = [];
        let amounts2 = [];
        let amounts3 = [];
        let names = [];
        const combined = arr1.reduce((acc, cur) => {
          const target = acc.find((e) => e.m_id === cur.m_id);
          if (target) {
            Object.assign(target, cur);
          } else {
            acc.push(cur);
          }
          return acc;
        }, arr2);
        const combined2 = combined.reduce((acc, cur) => {
          const target = acc.find((e) => e.m_id === cur.m_id);
          if (target) {
            Object.assign(target, cur);
          } else {
            acc.push(cur);
          }
          return acc;
        }, arr3);
        combined2.forEach((val) => {
          names.push(val.name);
          amounts.push(val.sum_num);
          amounts2.push(val.num);
          amounts3.push(val.wechatNum);
        });
        this.echartOption.xAxis[0].data = names;
        this.echartOption.series[0].data = amounts;
        this.echartOption.series[1].data = amounts2;
        this.echartOption.series[2].data = amounts3;
        let lineChart = this.$echarts.init(
            document.getElementById("lineChart")
        );

        let that = this;
        if (!that.lineChartClick)
          lineChart.on("click", function (params) {
            that.lineChartClick = true;
            that.dataparams = params
            that.getanalyseuserdata(that.page);
          });
        lineChart.setOption(this.echartOption);
      });
    },
    getMap() {
      getMapIndex().then((res) => {
        let arr = [];
        res.data.data.forEach((val) => {
          let obj = {
            name: val.name,
            value: [val.lng, val.lat, val.num],
          };
          arr.push(obj);
        });
        this.topData = arr
            .sort(function (a, b) {
              return b.value[2] - a.value[2];
            })
            .slice(0, 20);
        this.mapOption.series[0].data = arr;
        this.mapOption.series[1].data = arr
            .sort(function (a, b) {
              return b.value - a.value;
            })
            .slice(0, 10);
        this.$echarts
            .init(document.getElementById("mapChart"))
            .setOption(this.mapOption);
      });
    },

    getWebSocket() {
      this.$goeasy.connect({
        onSuccess: function () {
          //连接成功
          console.log("GoEasy connect successfully."); //连接成功
        },
        onFailed: function (error) {
          //连接失败
          console.log(
              "Failed to connect GoEasy, code:" +
              error.code +
              ",error:" +
              error.content
          );
        },
        onProgress: function (attempts) {
          //连接或自动重连中
          console.log("GoEasy is connecting", attempts);
        },
      });
      let pubsub = this.$goeasy.pubsub;
      let _that = this;
      pubsub.subscribe({
        channel: "screen_channel", //替换为您自己的channel
        onMessage: function (message) {
          console.log("是否能从服务端主动接收到消息");
          // _that.getMap();
          _that.getIndex();
          _that.getPageClick();
          _that.scrollView = !_that.scrollView;
        },
        onSuccess: function () {
          console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
          console.log(
              "Channel订阅失败, 错误编码：" +
              error.code +
              " 错误信息：" +
              error.content
          );
        },
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
  color: #61d2f7 !important;
  font-size: 14px;
  font-weight: 600;
  height: 48px;
  background-color: #072951 !important;
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
  color: #fff !important;
  background-color: #072951 !important;
}

.row-cells {
  color: #fff !important;
  background-color: #072951 !important;
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}
</style> 
